import * as PIXI from 'pixi.js';

// 默认导出获取场景构造函数
export default class VictoryScreen {
    public container: PIXI.Container;
    private overlay: PIXI.Graphics;
    // 获胜提示文本
    public text: PIXI.Text;
    protected texture: PIXI.Texture;
    protected sprite: PIXI.Sprite;


    constructor(app: PIXI.Application) {
        // 创建获胜场景容器
        this.container = new PIXI.Container();
        // 调用生成方法
        this.generate(app.screen.width, app.screen.height, app.loader);
    }

    // 显示方法
    show(winMode: number, winPlusPoints: number) {
        // 设置获胜场景容器的显示状态为显示
        this.container.visible = true;
        // 添加一个定时器回调函数并拿到定时器的编号
        const id = window.setTimeout(this.hide.bind(this), 3000);
        // 点击遮罩层时的回调函数
        const handler = () => {
            // 取消定时器
            window.clearTimeout(id);
            // 调用隐藏方法
            this.hide();
        };
        // 给遮罩层绑定点击事件
        this.overlay.addListener('pointerdown', handler.bind(this));
    }

    // 隐藏方法
    hide() {
        // 设置获胜场景容器的显示状态为隐藏
        this.container.visible = false;
    }

    // 生成方法
    // private generate(appWidth: number, appHeight: number, loader: PIXI.Loader) {
    //     // 设置获胜场景容器的显示状态为隐藏
    //     this.container.visible = false;

    //     // 创建遮罩层图形类
    //     this.overlay = new PIXI.Graphics();
    //     // 填充图形类的颜色
    //     this.overlay.beginFill(0xFFFFFF, 0.001);
    //     // 绘制图形类(x,y,宽度,高度)
    //     this.overlay.drawRect(0, 0, appWidth, appHeight);
    //     // 结束绘制
    //     this.overlay.endFill();
    //     // 图形类的交互响应
    //     this.overlay.interactive = true;
    //     // 如果启用，则鼠标光标悬停在displayObject上时，如果它是交互式的，则使用指针行为 设置此项会将'cursor'属性更改为''pointer'`。
    //     this.overlay.buttonMode = true;
    //     // 设置悬停光标模式为箭头
    //     this.overlay.cursor = 'default';

    //     // 创建矩形图形类
    //     const rect = new PIXI.Graphics();
    //     // 填充图形类的颜色
    //     rect.beginFill(0x02474E, 0.8);
    //     // 绘制图形类(x,y,宽度,高度)
    //     rect.drawRect(0, 0, 717.5, 400);
    //     // 设置矩形位置
    //     rect.x = 70;
    //     rect.y = (appHeight - rect.height) / 2;
    //     // 结束绘制
    //     rect.endFill();

    //     // 创建文本样式
    //     const style = new PIXI.TextStyle({
    //         fontFamily: 'Arial',
    //         fontSize: 50,
    //         fill: 'yellow',
    //         breakWords:true,
    //         align:'center'
    //     });

    //     // 创建'获胜文本'精灵
    //     // const text = new PIXI.Text('YOU WIN!', style);
    //    this.text = new PIXI.Text('YOU WIN!', style);
    //     // 设置'获胜文本'精灵的横坐标( 70 + (矩形宽度 - 文本自身宽度) / 2)
    //     this.text.x = 70 + (rect.width - this.text.width) / 2;
    //     // 设置'获胜文本'精灵的纵坐标((屏幕高度 - 文本高度) / 2)
    //     this.text.y = (appHeight - this.text.height) / 2;

    //     // 将矩形、'获胜文本'精灵、遮罩层添加到容器中
    //     // this.container.addChild(rect, text, this.overlay);
    //     this.container.addChild(rect, this.text, this.overlay);
    // }

    // 生成方法
    private generate(appWidth: number, appHeight: number, loader: PIXI.Loader) {
        // 设置获胜场景容器的显示状态为隐藏
        // this.container.visible = false;
        this.container.visible = false;

        // 创建遮罩层图形类
        this.overlay = new PIXI.Graphics();
        // 填充图形类的颜色
        // this.overlay.beginFill(0xFFFFFF, 0.001);
        this.overlay.beginFill(0x000000, 0.5);
        // 绘制图形类(x,y,宽度,高度)
        this.overlay.drawRect(0, 0, appWidth, appHeight);
        // 结束绘制
        this.overlay.endFill();
        // 图形类的交互响应
        this.overlay.interactive = true;
        // 如果启用，则鼠标光标悬停在displayObject上时，如果它是交互式的，则使用指针行为 设置此项会将'cursor'属性更改为''pointer'`。
        this.overlay.buttonMode = true;
        // 设置悬停光标模式为箭头
        this.overlay.cursor = 'default';

        // 通过加载器加载'获胜提示'的纹理
        this.texture = <PIXI.Texture>loader.resources!['win.png']!.texture;
        // 通过'获胜提示'的纹理创建图像精灵
        this.sprite = new PIXI.Sprite(this.texture);
        // 设置'获胜提示'精灵的宽高
        this.sprite.width = appWidth
        this.sprite.height = appHeight
        // 设置'获胜提示'精灵的位置
        this.sprite.x = (appWidth - this.sprite.width) / 2;
        this.sprite.y = (appHeight - this.sprite.height) / 2;

        // 将'获胜提示'精灵添加到遮罩层图形类中
        this.overlay.addChild(this.sprite)
        // 将获胜精灵添加到容器中
        this.container.addChild(this.overlay)
    }
}
